<script setup lang="ts">
import Footer from '@/layouts/Footer.vue';

const steps = [
  {
    title: '安装',
    description: '使用npm或yarn安装VividUI',
    code: 'npm install vivid-ui'
  },
  {
    title: '引入',
    description: '在项目中引入VividUI',
    code: `import VividUI from 'vivid-ui'
import 'vivid-ui/dist/vivid-ui.css'
import createApp from './app'

const app = createApp()
app.use(VividUI)`
  },
  {
    title: '使用',
    description: '开始在你的项目中使用组件',
    code: '<vi-button type="primary">点击我</vi-button>'
  }
]
</script>
<template>
  <!-- 快速开始区域 -->
  <section id="start" class="start-section" ref="start">
    <h2>快速开始</h2>
    <p class="section-description">只需几步即可将Vivid UI引入你的项目</p>

    <div class="start-steps">
      <div class="step" v-for="(step, index) in steps" :key="index">
        <div class="step-number">{{ index + 1 }}</div>
        <div class="step-content">
          <h3>{{ step.title }}</h3>
          <p>{{ step.description }}</p>
          <pre v-if="step.code"><code>{{ step.code }}</code></pre>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</template>

<style scoped>
/* 快速开始区域 */
.section-description {
  color: var(--text-light);
  margin-bottom: 3rem;
  font-size: 1.1rem;
}

.start-section {
  padding: 5rem 2rem;
  background-color: var(--bg-light);
}

.start-steps {
  max-width: 800px;
  margin: 0 auto;
}

.step {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  background-color: var(--bg-color);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.step-number {
  width: 40px;
  height: 40px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content {
  text-align: left;
}

.step-content h3 {
  margin-bottom: 0.5rem;
}

.step-content pre {
  background-color: var(--code-bg-color);
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-top: 1rem;
  overflow-x: auto;
}

.step-content code {
  font-family: 'Courier New', Courier, monospace;
  color: var(--text-color);
}
</style>
